<script>
import { parseSceneData } from '@/utils/scene-data'
import ProjectReport from '@/views/carbonEmissionWarning/carbonEmissionReport/ProjectReport.vue'
import Purpose from '@/views/carbonEmissionWarning/carbonEmissionReport/Purpose.vue'
import Overview from '@/views/carbonEmissionWarning/carbonEmissionReport/Overview.vue'
import IndicatorLibraryReport from '@/views/carbonEmissionWarning/carbonEmissionReport/IndicatorLibraryReport.vue'
import CarbonEmissionsAnalysis from '@/views/carbonEmissionWarning/carbonEmissionReport/CarbonEmissionsAnalysis.vue'
import CarbonReductionAnalysis from '@/views/carbonEmissionWarning/carbonEmissionReport/CarbonReductionAnalysis.vue'
import CarbonSinkAnalysis from '@/views/carbonEmissionWarning/carbonEmissionReport/CarbonSinkAnalysis.vue'
import CarbonAssetReport from '@/views/carbonEmissionWarning/carbonEmissionReport/CarbonAssetReport.vue'
import ImprovementSuggestion from '@/views/carbonEmissionWarning/carbonEmissionReport/ImprovementSuggestion.vue'
import { now, subtractDateStr } from '@/utils/date-utils'

export default {
  name: 'CarbonEmissionReport',
  components: {
    ImprovementSuggestion,
    CarbonAssetReport,
    CarbonSinkAnalysis,
    CarbonReductionAnalysis,
    CarbonEmissionsAnalysis,
    IndicatorLibraryReport,
    Overview,
    Purpose,
    ProjectReport
  },
  data() {
    return {
      queryForm: {
        sceneProjectId: null,
        statisticsMode: 'day', // hour:时，day:日,month: 月,year: 年,
        startTime: null,
        endTime: null
      },
      upInfo: {},
      projectList: [],  // 项目树
      roomList: [],  // 空间树
      datePickerType: 'date',
      timeFormat: 'yyyy-MM-dd',
      startTimeOption: {
        disabledDate: this.disabledStartDate
      },
      endTimeOption: {
        disabledDate: this.disabledEndDate
      }
    }
  },
  created() {
    this.statisticsModeChangeHandler()
    this.$api.commonSelected({
      code: 'SceneProjectSelected'
    }).then(response => {
      this.projectList = response.data
      if (this.projectList.length > 0) {
        this.queryForm.sceneProjectId = this.projectList[0].value
        this.projectChangeHandler(this.queryForm.sceneProjectId)
      }
    })
  },
  methods: {
    onIsUp(upInfo) {
      this.upInfo = upInfo
    },
    disabledStartDate(time) {
      if (this.queryForm.endTime == null) {
        return false
      }
      let threshold = 0
      switch (this.queryForm.statisticsMode) {
        case 'hour':
          threshold = 8
          break
        case 'day':
          threshold = 32
          break
        case 'month':
          threshold = 366
          break
        case 'year':
          threshold = 365 * 5
          break
      }
      const date = new Date()

      date.setTime(Date.parse(this.queryForm.endTime) - threshold * 86400000)
      const result = time.getTime() > date.getTime() && time.getTime() < Date.parse(this.queryForm.endTime)
      return !result
    },
    disabledEndDate(time) {
      if (this.queryForm.startTime == null) {
        return false
      }
      let threshold = 0
      switch (this.queryForm.statisticsMode) {
        case 'hour':
          threshold = 8
          break
        case 'day':
          threshold = 32
          break
        case 'month':
          threshold = 366
          break
        case 'year':
          threshold = 365 * 3
          break
      }
      const date = new Date()
      date.setTime(Date.parse(this.queryForm.startTime) + threshold * 86400000)
      const result = time.getTime() > Date.parse(this.queryForm.startTime) && time.getTime() < date.getTime()
      return !result
    },
    statisticsModeChangeHandler() {
      switch (this.queryForm.statisticsMode) {
        case 'day':
          this.datePickerType = 'date'
          this.timeFormat = 'yyyy-MM-dd'
          if (this.queryForm.startTime == null) {
            this.queryForm.startTime = subtractDateStr(new Date(), 7, this.timeFormat.toUpperCase())
          }
          if (this.queryForm.endTime == null) {
            this.queryForm.endTime = now(this.timeFormat.toUpperCase())
          }
          break
        case 'month':
          this.datePickerType = 'month'
          this.timeFormat = 'yyyy-MM'
          if (this.queryForm.startTime == null) {
            this.queryForm.startTime = subtractDateStr(new Date(), 32, this.timeFormat.toUpperCase())
          }
          if (this.queryForm.endTime == null) {
            this.queryForm.endTime = now(this.timeFormat.toUpperCase())
          }
          break
        case 'year':
          this.datePickerType = 'year'
          this.timeFormat = 'yyyy'
          break
      }
    },
    resetHandler() {
      this.queryForm = {
        statisticsMode: this.queryForm.statisticsMode,
        sceneProjectId: this.queryForm.sceneProjectId
      }
      this.getList()
    },
    getList() {
      this.loading = true
      if (this.queryForm.roomInfo != null && this.queryForm.roomInfo.length > 0) {
        this.queryForm.sceneEdificeId = this.queryForm.roomInfo[0]
        if (this.queryForm.roomInfo.length > 1) {
          this.queryForm.sceneFloorId = this.queryForm.roomInfo[1]
        }
        if (this.queryForm.roomInfo.length > 2) {
          this.queryForm.sceneRoomId = this.queryForm.roomInfo[2]
        }
      } else {
        delete this.queryForm.sceneEdificeId
        delete this.queryForm.sceneFloorId
        delete this.queryForm.sceneRoomId
      }
      this.queryForm = { ...this.queryForm }
      this.loading = false
    },
    projectChangeHandler(value) {
      if (value == null || value === '') {
        this.roomList = []
      } else {
        this.$api.sceneRoom.queryRoomList({
          sceneProjectId: value,
          sortColumn: 'floorName',
          sortOrder: 'asc'
        }).then(response => {
          this.roomList = parseSceneData(response.data)
        })
      }
    }
  }
}
</script>

<template>
  <div class="CarbonEmissionReport">
    <el-form :model="queryForm" inline>
      <el-form-item>
        <el-radio-group v-model="queryForm.statisticsMode" @change="statisticsModeChangeHandler" size="small">
          <el-radio-button label="day">按日</el-radio-button>
          <el-radio-button label="month">按月</el-radio-button>
          <el-radio-button label="year">按年</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属项目" prop="sceneProjectId">
        <el-select v-model="queryForm.sceneProjectId" @change="projectChangeHandler">
          <el-option v-for="item in projectList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属场景" prop="roomInfo">
        <el-cascader v-model="queryForm.roomInfo" :options="roomList" placeholder="请选择" clearable
                     :props="{ checkStrictly: true }" />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="queryForm.startTime" :type="datePickerType" :format="timeFormat"
                        :value-format="timeFormat"
                        :picker-options="startTimeOption"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="queryForm.endTime" :type="datePickerType" :format="timeFormat"
                        :value-format="timeFormat"
                        :picker-options="endTimeOption"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="getList" type="primary" icon="el-icon-search">查询</el-button>
        <el-button size="small" @click="resetHandler" icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="padding: 0 5%">
      <project-report :query-params="queryForm" />
      <purpose />
      <overview v-if="queryForm.sceneProjectId != null" :query-params="queryForm" :project-list="projectList" />
      <IndicatorLibraryReport v-if="queryForm.sceneProjectId != null" :query-params="queryForm" />
      <CarbonEmissionsAnalysis v-if="queryForm.sceneProjectId != null" :query-params="queryForm"
                               :project-list="projectList" @isUp="onIsUp" />
      <CarbonReductionAnalysis v-if="queryForm.sceneProjectId != null" :query-params="queryForm"
                               :project-list="projectList" />
      <CarbonSinkAnalysis v-if="queryForm.sceneProjectId != null" :query-params="queryForm"
                          :project-list="projectList" />
      <CarbonAssetReport v-if="queryForm.sceneProjectId != null" :query-params="queryForm"
                         :project-list="projectList" />
      <ImprovementSuggestion v-if="queryForm.sceneProjectId != null" :query-params="queryForm" :up-info="upInfo" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.CarbonEmissionReport {
  overflow-y: auto;
  padding: 15px;
  background-color: #ffffff;
  height: 100%;
}
</style>
